<html>

<head>
  <meta http-equiv="Content-Security-Policy"
    content="img-src vscode-resource: data: https:; script-src vscode-resource:; style-src 'unsafe-inline' vscode-resource:;" />
  <style>
    html {
      box-sizing: border-box;
      padding-top: 32px;
    }

    body {
      /* display: flex;
      flex-flow: column;
      align-items: center; */

    }

    #snippet-container {
      width: calc(100% - 4rem);
      margin: 64px auto;
    }

    .boy-box {
      width: calc(100% - 8rem);
      margin: 0px 4rem;
      padding-top: 60px;
      padding-bottom: 60px;
    }

    #snippet {
      overflow: hidden;
      resize: both;
      display: flex;
      padding: 20px;
      border-radius: 5px;
      box-shadow: rgba(0, 0, 0, 0.55) 0px 20px 68px;
      padding-top:40px; 
    }

    #snippet>div {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      max-width: 100%;
      white-space: pre-wrap !important;
      word-break: break-all;
    }

    #snippet>div>div {
      display: flex;
      flex-wrap: wrap;
    }

    #save-container {
      margin-top: 40px;
      margin-bottom: 60px;
      text-align: center;
    }

    .obturateur {
      width: 64px;
      height: 64px;
    }

    .obturateur * {
      transition: stroke .4s;
    }

    .obturateur:not(.filling) path {
      opacity: .5;
    }

    .window-controls {
      margin-bottom: -30px;
      margin-left: 15px;
    }
    #setting{
      margin: 0px 4rem;
    }
  </style>
</head>

<body>

  <!-- <div id="setting">
     控制按钮<input type="checkbox" name="" id="" checked onclick="change(this,'control')">
     阴影<input type="checkbox" name="" id="" checked  onclick="change(this,'shadow')">
     背景色<input type="text" name="" id="" value="#fff">

  </div> -->

  <div id="snippet-container">
    <div class="boy-box">
      <div id="control" class="window-controls">
        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="14" viewBox="0 0 54 14">
          <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
            <circle cx="6" cy="6" r="6" fill="#FF5F56" stroke="#E0443E" stroke-width=".5"></circle>
            <circle cx="26" cy="6" r="6" fill="#FFBD2E" stroke="#DEA123" stroke-width=".5"></circle>
            <circle cx="46" cy="6" r="6" fill="#27C93F" stroke="#1AAB29" stroke-width=".5"></circle>
          </g>
        </svg>
      </div>
      <div id="snippet"
        style="color: #d8dee9;background-color: #2e3440;font-family: SFMono-Regular,Consolas,DejaVu Sans Mono,Ubuntu Mono,Liberation Mono,Menlo,Courier,monospace;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;">
        <meta charset="utf-8">
        <div
          style="color: #d8dee9;background-color: #2e3440;font-family: Input Mono;font-weight: normal;font-size: 12px;line-height: 18px;white-space: pre;">
          <p>两种方式：</p>
          <p>1.点击本窗口，按Ctrl+V粘贴代码即可。</p>
          <p>2.如果左边打开了代码窗口，在左边拖选代码，本窗口自动同步过来。</p>
        </div>
      </div>
    </div>
  </div>



  <div id="save-container">

    <svg id="save" class="obturateur" width="132px" height="132px" viewBox="0 0 132 132" version="1.1"
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
        stroke-linejoin="round">
        <g id="obturateur" transform="translate(2.000000, 2.000000)" stroke-width="3">
          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="64"></circle>
          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="60.9706667"></circle>
          <circle id="Oval" stroke="#4C566A" cx="64" cy="64" r="51.8734222"></circle>
          <circle id="Oval" stroke="#D8DEE9" cx="64" cy="64" r="28.2595556"></circle>
          <path d="M17.0965333,86.1788444 L40.5667556,48.1998222" id="Shape" stroke="#EBCB8B"></path>
          <path d="M15.1509333,46.5180444 L58.6026667,36.2574222" id="Shape" stroke="#A3BE8C"></path>
          <path d="M41.8204444,17.0965333 L79.8001778,40.5660444" id="Shape" stroke="#8FBCBB"></path>
          <path d="M81.4819556,15.1502222 L91.7425778,58.6019556" id="Shape" stroke="#88C0D0"></path>
          <path d="M110.902756,41.8197333 L87.4332444,79.8001778" id="Shape" stroke="#81A1C1"></path>
          <path d="M112.848356,81.4819556 L69.3973333,91.7418667" id="Shape" stroke="#B48EAD"></path>
          <path d="M86.1795556,110.902756 L48.1998222,87.4332444" id="Shape" stroke="#BF616A"></path>
          <path d="M46.5187556,112.848356 L36.2574222,69.3973333" id="Shape" stroke="#D08770"></path>
        </g>
      </g>
    </svg>
  </div>

  <script src="./dom2image.js"></script>
  <script src="./vivus.js"></script>
  <script src="./index.js"></script>
</body>

</html>